<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>可多层嵌套的jquery弹出窗口插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/b.dialog.bootstrap3.css" type="text/css">
	<link rel="stylesheet" href="css/dialog.css" type="text/css">
	<style type="text/css">
		.content{
			background-color: white;
		}
		.content .container{
			width: 900px;
			padding-bottom: 30px;
		}
		.content .row h3{
			text-align: center;
			color: #337AB7;
		}
		.content .row h3 i{
		}
		.content h4 {
			margin-top: 25px;
			font-weight: bold;
		}
		.content .desc{
			font-size: 15px;
			color: #666666;
			margin: 0px 50px 20px 50px;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>可多层嵌套的jquery弹出窗口插件 <span>A multiple layer dialog,base on bootstrap</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201706214586.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="content">
		<div class="container" style="margin-top: 50px;">
		<h1 class="heading">可多层嵌套高定制化的弹出窗口 <small>支持多层嵌套、高可定制化</small></h1>
		<div class="row-fluid">
			<h4 class="heading">基本初始化 <small></small></h4>
			<button class="btn btn-default" type="button" id="btnDialog">打开窗口</button>
<pre>
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load'
});
</pre>
		</div>
		<div class="row-fluid">
			<h4 class="heading">参数的传递与回传 <small>父窗口与打开窗口之间的数据交互</small></h4>
			<button class="btn btn-default" type="button" id="btnDialog1">打开窗口</button>
<pre>
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	url : 'http://aa.com/load',
	//传递userName参数给打开的窗口
	params : {
		'userName' : 'zhangsan'
	},
	//关闭窗口后，回传的数据内容将会作为data参数出现在callback函数中，方便进行操作
	callback:function(data){
		if(data && data.results && data.results.length &gt; 0 ){
			eDialog.alert('已完成弹出窗口操作！&lt;br&gt;接收到弹出窗口传回的 userName 参数，值为：&lt;b&gt;' + data.results[0].userName + '&lt;/b&gt;');
		}else{
			eDialog.alert('弹出窗口未回传参数',$.noop,'error');
		}
	}
});

//在被打开的页面中，使用以下的脚本获得上述传递的userName参数：
var param = bDialog.getDialogParams();
$('#userName').val(param.userName);
</pre>
		</div>
			
		<div class="row-fluid">
			<h4 class="heading">多层嵌套打开窗口 <small>打开窗口，在该窗口的基础上再打开新窗口</small></h4>
			<p><span class="label label-default">操作提示</span> 打开窗口后，再次点击“打开窗口”、“打开颜色窗口”、“打开简洁样式窗口”等任意按钮，进行再次打开窗口操作</p>
			<button class="btn btn-default" type="button" id="btnDialog2">打开窗口</button>
		</div>
		<div class="row-fluid">
			<h4 class="heading">界面定制化 <small>通过参数打开关闭部分内容</small></h4>
			<button class="btn btn-default" type="button" id="btnDialog3">无关闭按钮窗口</button>
			<button class="btn btn-default" type="button" id="btnDialog4">无标题栏窗口</button>
			<button class="btn btn-default" type="button" id="btnDialog5">全宽度窗口</button>
<pre>
bDialog.open({
	//title属性设置为false，则关闭标题栏
	title : false,
	width : 500,
	height : 450,
	//关闭窗口右上角的关闭按钮
	dialogCloseButton : false,
	//全宽度展示窗口
	fullWidth : true,
	url : 'http://aa.com/load'
});
</pre>
		</div>

		<div class="row-fluid">
			<h4 class="heading">窗口皮肤使用 <small>仅指定不同样式名称即可完全改变窗口的外观</small></h4>
			<button class="btn btn-default" type="button" id="btnDialog6">默认样式窗口(original)</button>
			<button class="btn btn-default" type="button" id="btnDialog7">颜色标题窗口(blue)</button>
			<button class="btn btn-default" type="button" id="btnDialog8">简洁内容窗口(simple)</button>
			<p>样式定义：</p>
<pre>
div.original{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
div.original div.modal-header {
	background-color: white;
	-webkit-border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
}
div.blue{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div.blue div.modal-header {
	background-color: #0866C6;
}
div.blue div.modal-header h3 {
	color: white;
}
div.blue div.modal-header button.close {
	opacity: 1;
	color: white;
	font-weight: normal;
}
div.simple div.modal-header {
	background-color: white;
	border-bottom: 0px;
}
div.simple div.modal-header h3 {
	display: none;
}
div.simple div.modal-header button.close {
	opacity: 1;
	font-size: 26px !important;
	border: 3px solid white;
	background-color: black;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color: #EEEEEE;
	text-shadow:none;
	font-weight: normal;
	position: absolute;
	right: -20px;
	top: -25px;
	z-index: 10;
}
</pre>
			<p>脚本代码：</p>
<pre>
bDialog.open({
	title : '窗口标题',
	width : 500,
	height : 450,
	customClass : 'simple'
	url : 'http://aa.com/load'
});
</pre>
		</div>
		
		
		<div class="row-fluid">
			<h4 class="heading">打开页面片段 <small>将页面中已经定义好的HTML内容，放在弹出窗口中展示</small></h4>
			<div id="innerContent" class="hide">
				<div>
					<h1 id="support" class="page-header">浏览器和设备的支持情况</h1>
					<p class="lead">Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>
					
					<h2 id="support-browsers">被支持的浏览器</h2>
					<p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。</p>
				</div>
			</div>
			<button class="btn btn-default" type="button" id="btnDialog9">打开窗口</button>
<pre>
&lt;div id="innerContent" class="hide"&gt;
	&lt;div&gt;
		&lt;h1 id="support" class="page-header"&gt;浏览器和设备的支持情况&lt;/h1&gt;
		&lt;p class="lead"&gt;Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。&lt;/p&gt;
		
		&lt;h2 id="support-browsers"&gt;被支持的浏览器&lt;/h2&gt;
		&lt;p&gt;特别注意，我们坚决支持这些浏览器的&lt;strong&gt;最新版本&lt;/strong&gt;。&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<pre>
//参数1为插件初始化参数，参数2为页面片段模式传递的页面内容
bDialog.open({
	title : '页面片段窗口',
	width : 500,
	height : 450,
},$('#innerContent').html());
</pre>
		</div>
	</div>
</div>

		
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201610314156.html">
			  <img src="related/1.jpg" width="300" alt="轻量级Material Design风格jquery对话框插件"/>
			  <h3>轻量级Material Design风格jquery对话框插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201610254139.html">
			  <img src="related/2.jpg" width="300" alt="zeroModal-扁平化风格jQuery弹出层插件"/>
			  <h3>zeroModal-扁平化风格jQuery弹出层插件</h3>
			</a>
		</div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<!-- 拖拽功能库 -->
	<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
	<!-- 插件核心脚本 -->
	<script type="text/javascript" src="js/b.dialog.js" ></script>
	<script type="text/javascript">
		$(function(){
			$('#btnDialog').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					url : 'opentext.html'
				});
			});
			$('#btnDialog1,#btnDialog2').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					url : 'open.html',
					params : {
						'userName' : 'zhangsan'
					},
					callback:function(data){
						if(data && data.results && data.results.length > 0 ){
							alert('已完成弹出窗口操作！\\n接收到弹出窗口传回的 userName 参数，值为：\\n' + data.results[0].userName + '</b>');
						}else{
							alert('弹出窗口未回传参数',$.noop,'error');
						}
					}
				});
			});
			$('#btnDialog3').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					dialogCloseButton : false,
					url : 'opentext.html'
				});
			});
			$('#btnDialog4').click(function(){
				bDialog.open({
					title : false,
					width : 500,
					height : 450,
					url : 'opentext.html'
				});
			});
			$('#btnDialog5').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					fullWidth : true,
					url : 'opentext.html'
				});
			});
			
			$('#btnDialog6').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					customClass : 'original',
					url : 'opentext.html'
				});
			});
			$('#btnDialog7').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					customClass : 'blue',
					url : 'opentext.html'
				});
			});
			$('#btnDialog8').click(function(){
				bDialog.open({
					title : '窗口标题',
					width : 500,
					height : 450,
					customClass : 'simple',
					url : 'opentext.html'
				});
			});
			$('#btnDialog9').click(function(){
				bDialog.open({
					title : '页面片段窗口',
					width : 500,
					height : 450
				},$('#innerContent').html());
			});
		});
	</script>
</body>
</html>